fetch('movies.json')
fetch('movies.json')
    .then(response => {
        console.log(response);
    });
fetch('movies.json')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });
fetch('movies.json')
    .then(response => response.json())
    .then(data => console.log(data));
fetch('test.txt')
    .then(response => response.text())
    .then(data => console.log(data));
fetch('<https://api.github.com/users>')
    .then(response => response.json())
    .then(data => console.log(data));
fetch('<https://api.github.com/users/你的⽤户名>')
    .then(response => response.json())
    .then(data => console.log(data));
fetch('<https://api.github.com/users/你的⽤户名>')
    .then(response => response.json())
    .then(data => {
        document.querySelector('h1').textContent = data.logi
        n;
    });
axios.get('movies.json')
    .then(response => console.log(response.data));
function fetchUser() {
    showSpinner();
    fetch('<https://randomuser.me/api/>')
        .then((res) => res.json())
        .then((data) => {
            const user = data.results[0];
            displayUser(user);
            hideSpinner();
        });
}
function displayUser(user) {
    // 根据性别改变背景颜⾊
    if (user.gender === 'female') {
        document.body.style.backgroundColor = 'rebeccapurple';
    } else {
        document.body.style.backgroundColor = 'steelblue';
    }
    // 更新DOM中的⽤户信息
    const userDisplay = document.querySelector('#user');
    userDisplay.innerHTML = `
        <div class="flex justify-between">
        <div class="flex">
        <img class="w-48 h-48 rounded-full mr-8" src
        ="${user.picture.large}" />
       <div class="space-y-3">
       <p class="text-xl"><span class="font-bol
d">姓名: </span>${user.name.first} ${user.name.last}</p>
 <p class="text-xl"><span class="font-bol
d">邮箱: </span>${user.email}</p>
 <p class="text-xl"><span class="font-bol
d">电话: </span>${user.phone}</p>
 <p class="text-xl"><span class="font-bol
d">位置: </span>${user.location.city}, ${user.location.country}</p>
 <p class="text-xl"><span class="font-bol
d">年龄: </span>${user.dob.age}</p>
</div>
 </div>
 </div>
 `;
}
function showSpinner() {
    document.querySelector('.spinner').style.display = 'block';
}
function hideSpinner() {
    document.querySelector('.spinner').style.display = 'none';
}
document.querySelector('#generate').addEventListener('click',
    fetchUser);
<div id="user" class="mt-6">
    <div class="flex justify-between">
        <div class="flex">
            <img class="w-48 h-48 rounded-full mr-8" src="<https://randomuser.me/api/portraits/women/45.jpg>" />
            <div class="space-y-3">
                <p class="text-xl"><span class="font-bold">姓
                    名: </span>Sara Wilson</p>
                <p class="text-xl"><span class="font-bold">邮
                    箱: </span>sarawilson@gmail.com</p>
                <p class="text-xl"><span class="font-bold">电
                    话: </span>(555) 555-5555</p>
                <p class="text-xl"><span class="font-bold">位
                    置: </span>Boston, MA</p>
                <p class="text-xl"><span class="font-bold">年
                    龄: </span>30</p>
            </div>
        </div>
    </div>
</div>

